<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统功能设置</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      margin-bottom: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
    }
    .layui-card-header {
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }
    .layui-card-header i {
      margin-right: 8px;
    }
    .function-group {
      padding: 15px 20px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .function-group:hover {
      background-color: #f9f9f9;
    }
    .function-info {
      flex: 1;
    }
    .function-name {
      font-weight: 500;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
    }
    .function-name i {
      margin-right: 8px;
      color: #1E9FFF;
    }
    .function-desc {
      color: #666;
      font-size: 12px;
      line-height: 1.5;
    }
    .function-actions {
      margin-left: 20px;
    }
    .setting-section {
      margin-bottom: 30px;
    }
    .section-title {
      font-size: 18px;
      margin-bottom: 15px;
      padding-left: 10px;
      border-left: 3px solid #1E9FFF;
      color: #333;
    }
    .permission-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }
    .permission-table th, .permission-table td {
      border: 1px solid #eee;
      padding: 10px;
      text-align: center;
    }
    .permission-table th {
      background-color: #f9f9f9;
      font-weight: 500;
    }
    .btn-group {
      padding: 20px;
      text-align: center;
      background-color: #f9f9f9;
      border-top: 1px solid #eee;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
  </style>
</head>
<body>
  <div class="layui-card">
    <div class="layui-card-header">
      <i class="fa fa-sliders"></i> 系统功能设置
    </div>
    
    <div class="layui-card-body" style="padding:0;">
      <!-- 核心功能模块 -->
      <div class="setting-section" style="padding:20px;">
        <h3 class="section-title">核心功能模块</h3>
        
        <div class="function-group">
          <div class="function-info">
            <div class="function-name"><i class="fa fa-bullhorn"></i> 公告管理</div>
            <div class="function-desc">管理系统公告的发布、编辑、删除和展示，支持按角色查看不同公告</div>
          </div>
          <div class="function-actions">
            <input type="checkbox" name="announcement" lay-skin="switch" checked lay-text="启用|禁用">
          </div>
        </div>
        
        <div class="function-group">
          <div class="function-info">
            <div class="function-name"><i class="fa fa-cubes"></i> 项目管理</div>
            <div class="function-desc">管理科研项目的创建、进度跟踪、成员分配和成果展示</div>
          </div>
          <div class="function-actions">
            <input type="checkbox" name="project" lay-skin="switch" checked lay-text="启用|禁用">
          </div>
        </div>
        
        <div class="function-group">
          <div class="function-info">
            <div class="function-name"><i class="fa fa-users"></i> 用户管理</div>
            <div class="function-desc">管理系统用户账号、角色分配、权限设置和操作日志</div>
          </div>
          <div class="function-actions">
            <input type="checkbox" name="user" lay-skin="switch" checked lay-text="启用|禁用">
          </div>
        </div>
        
        <div class="function-group">
          <div class="function-info">
            <div class="function-name"><i class="fa fa-file-text-o"></i> 文档管理</div>
            <div class="function-desc">上传、分类、检索和版本控制各类科研文档和资料</div>
          </div>
          <div class="function-actions">
            <input type="checkbox" name="document" lay-skin="switch" checked lay-text="启用|禁用">
          </div>
        </div>
      </div>
      
      <!-- 扩展功能模块 -->
      <div class="setting-section" style="padding:20px; border-top:1px solid #eee;">
        <h3 class="section-title">扩展功能模块</h3>
        
        <div class="function-group">
          <div class="function-info">
            <div class="function-name"><i class="fa fa-line-chart"></i> 数据统计</div>
            <div class="function-desc">生成系统使用情况、项目进度和用户活跃度等统计报表</div>
          </div>
          <div class="function-actions">
            <input type="checkbox" name="statistics" lay-skin="switch" checked lay-text="启用|禁用">
          </div>
        </div>
        
        <div class="function-group">
          <div class="function-info">
            <div class="function-name"><i class="fa fa-comments"></i> 消息通知</div>
            <div class="function-desc">系统内消息推送、邮件通知和提醒功能</div>
          </div>
          <div class="function-actions">
            <input type="checkbox" name="message" lay-skin="switch" checked lay-text="启用|禁用">
          </div>
        </div>
        
        <div class="function-group">
          <div class="function-info">
            <div class="function-name"><i class="fa fa-plug"></i> 第三方集成</div>
            <div class="function-desc">与外部系统如OA、CRM的集成对接功能</div>
          </div>
          <div class="function-actions">
            <input type="checkbox" name="integration" lay-skin="switch" lay-text="启用|禁用">
          </div>
        </div>
        
        <div class="function-group">
          <div class="function-info">
            <div class="function-name"><i class="fa fa-shield"></i> 安全审计</div>
            <div class="function-desc">记录系统关键操作、检测异常行为和安全告警</div>
          </div>
          <div class="function-actions">
            <input type="checkbox" name="audit" lay-skin="switch" lay-text="启用|禁用">
          </div>
        </div>
      </div>
      
      <!-- 功能权限设置 -->
      <div class="setting-section" style="padding:20px; border-top:1px solid #eee;">
        <h3 class="section-title">功能权限设置</h3>
        <p style="color:#666; margin-bottom:15px; font-size:14px;">配置不同角色对各功能的访问权限</p>
        
        <table class="permission-table">
          <tr>
            <th>功能模块</th>
            <th>管理员</th>
            <th>部门主管</th>
            <th>普通用户</th>
            <th>访客</th>
          </tr>
          <tr>
            <td align="left">公告管理</td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
          </tr>
          <tr>
            <td align="left">项目管理</td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary"></td>
          </tr>
          <tr>
            <td align="left">用户管理</td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary"></td>
            <td><input type="checkbox" lay-skin="primary"></td>
            <td><input type="checkbox" lay-skin="primary"></td>
          </tr>
          <tr>
            <td align="left">数据统计</td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary" checked></td>
            <td><input type="checkbox" lay-skin="primary"></td>
            <td><input type="checkbox" lay-skin="primary"></td>
          </tr>
        </table>
      </div>
      
      <!-- 操作按钮 -->
      <div class="btn-group">
        <button class="layui-btn" lay-submit lay-filter="saveSettings"><i class="fa fa-save"></i> 保存设置</button>
        <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
        <button type="button" class="layui-btn layui-btn-normal" id="advancedSettings"><i class="fa fa-cog"></i> 高级设置</button>
      </div>
    </div>
  </div>
  
  <div class="footer">© 系统功能设置 - 版权所有</div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    layui.use(['form', 'layer'], function() {
      const form = layui.form;
      const layer = layui.layer;
      
      // 保存设置
      form.on('submit(saveSettings)', function(data) {
        layer.load();
        setTimeout(function() {
          layer.closeAll('loading');
          layer.msg('功能设置已保存', {icon: 1});
        }, 800);
        return false;
      });
      
      // 功能开关状态变化
      form.on('switch()', function(data) {
        const status = data.elem.checked ? '启用' : '禁用';
        const funcName = data.elem.name;
        
        // 找到对应的功能名称
        const funcTitle = document.querySelector(`[name="${funcName}"]`).closest('.function-group').querySelector('.function-name').textContent.trim();
        
        layer.tips(`${funcTitle}已${status}`, data.elem, {
          tips: [1, '#3595CC'],
          time: 1500
        });
      });
      
      // 高级设置按钮
      document.getElementById('advancedSettings').addEventListener('click', function() {
        layer.open({
          type: 1,
          title: '高级功能设置',
          content: `
            <div style="padding:20px;">
              <p style="margin-bottom:15px;">功能模块高级参数配置</p>
              <div class="layui-form-item">
                <label class="layui-form-label">公告缓存时间</label>
                <div class="layui-input-inline">
                  <input type="text" name="cacheTime" value="30" class="layui-input">
                </div>
                <span class="layui-form-mid">分钟</span>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">项目列表每页条数</label>
                <div class="layui-input-inline">
                  <select name="pageSize">
                    <option value="10">10条/页</option>
                    <option value="20" selected>20条/页</option>
                    <option value="50">50条/页</option>
                  </select>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left:110px;">
                  <button class="layui-btn" lay-submit>保存配置</button>
                </div>
              </div>
            </div>
          `,
          area: ['400px', '250px']
        });
        
        form.on('submit', function() {
          layer.closeAll('page');
          layer.msg('高级设置已保存', {icon: 1});
          return false;
        });
      });
    });
  </script>
</body>
</html>
